<template>
  <div>
    <v-card class="section4">
      <section class="section-common section-4 section-token">
        <div class="normal-layout normal-layout">
          <h3 id="TOKEN" class="public-text">JOJO TOKENNOMIC</h3>
          <div class="token-inner">
            <p class="brief">
              JOJO
              Token基于币安智能链发行，完全去中心化，没有任何私募和团队预留，采用超级燃烧机制，使Token数量燃烧的非常快速，大大减少总供应量的流通。JOJO在公平发行的前提下，每笔链上转账或交易都会触发相应的代币分配，其中包含持币收益，Token燃烧和NFT矿池，并且会燃烧所有私钥，保障它的公平。
            </p>
            <div class="token-image">
              <img src="@/assets/images/home/token-icon.svg" />
            </div>
          </div>
        </div>
      </section>
    </v-card>
  </div>
</template>
<script>
export default {
  components: {},
  data: () => ({}),
  watch: {
    group() {
      this.drawer = false;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./../../../common/styles/common.scss";
.section4 {
  .section-4 {
    background: url(./../../../assets/images/home/back-4.svg);
    background-position: 0 0;
    background-size: cover;
    padding-top: 175px;
    padding-bottom: 120px;
    color: #431216;
    background-repeat: no-repeat;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      padding: 96px 15px 64px;
    }
  }

  .normal-layout {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      width: 100%;
    }
  }

  h3 {
    font-size: 72px;
    font-weight: 700;
    white-space: nowrap;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      font-size: 25px;
    }
  }

  .token-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }
  .brief {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      font-size: 14px;
      margin-top: 20px;
    }
  }
  .token-image {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: -60px;
    margin-right: -80px;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      margin-top: 10px;
      margin-right: unset;
    }
    img {
      vertical-align: top;
      max-width: 100%;
    }
  }
}
</style>